<template>
	<view class="qui-grids gutter10" :class="'column'+column">
		<view :style="{width: inline?'auto':'', minWidth: '120rpx'}" class="qui-grid" :key="index" v-for="(item, index) in label.list">
			<view class="qui-btn small outline" :class="label.selected === index ? activeClass : color" @click="changeRadio(index)">{{ item[itemValue] }}</view>
		</view>
	</view>
</template>

<script>
	/* 
	 label: {
	 	selected: 0,
	 	list: [
			{
				name: '100'
			},
			{
				name: '200'
			}
		]
	 },
	 color: 内置 red grren blue yellow
	 */
export default {
	name: 'RadioGroup',
	props: {
		color: {
			type: String,
			default: 'theme'
		},
		label: Object,
		itemValue: {
			type: String,
			default: 'name'
		},
		column: {
			type: [String, Number],
			default: 3
		},
		inline: {
			type: Boolean,
			default: false
		}
	},
	computed:{
		activeClass() {
			return `${this.color} active`
		}
	},
	methods: {
		changeRadio(index) {
			this.$emit('update:selected', index);
			this.$emit('change', index);
		}
	}
};
</script>

<style scoped>

.qui-btn.red{
	color: var(--redColor);
	border-color: var(--redColor) !important;
}
.qui-btn.red.active {
	background: var(--redColor) !important;
	color: #ffffff !important;
	border-color: var(--redColor) !important;
}

.qui-btn.green{
	color: var(--greenColor);
	border-color: var(--greenColor) !important;
}
.qui-btn.green.active {
	background: var(--greenColor) !important;
	color: #ffffff !important;
	border-color: var(--greenColor) !important;
}
.qui-btn.blue{
	color: var(--blueColor);
	border-color: var(--blueColor) !important;
}
.qui-btn.blue.active {
	background: var(--blueColor) !important;
	color: #ffffff !important;
	border-color: var(--blueColor) !important;
}

.qui-btn.yellow{
	color: var(--yellowColor);
	border-color: var(--yellowColor) !important;
}
.qui-btn.yellow.active {
	background: var(--yellowColor) !important;
	color: #ffffff !important;
	border-color: var(--yellowColor) !important;
}


.qui-btn.theme{
	color: var(--themeColor);
	border-color: var(--themeColor) !important;
}
.qui-btn.theme.active {
	background: var(--themeColor) !important;
	color: #ffffff !important;
	border-color: var(--themeColor) !important;
}
</style>
